<template>
    <div class="container">
        <div class="support-box">
            <img src="@/assets/MiniTripBox.png" alt="小游匣头像">
            <p>小游匣</p>
        </div>
        <div class="custom-question">
            <span class="question-title">你可以这样问我：</span>
            <div class="question-list" v-for="question in currentQuestions" :key="question" @click="handleQuestionClick(question)">
                <img src="@/assets/Chat.png" alt="聊天图标">
                <p>{{ question }}</p>
            </div>
        </div>
        <div class="switch-question" @click="switchQuestion">
            <img src="@/assets/Switch.png" alt="换一换图标">
            <p>换一换</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['questionClick'])

// 示例问题列表
const questionExamples = ref([
  '今天南昌天气怎么样？',
  '推荐一些旅游景点',
  '帮我规划行程',
  '武汉附近有什么好吃的？',
  '长沙火车票查询？',
  '青岛有什么特色活动推荐？',
  '北京三日游攻略',
  '上海迪士尼门票价格',
  '广州美食推荐',
  '深圳周边游玩地点',
  '成都熊猫基地开放时间',
  '重庆洪崖洞怎么去',
  '西安兵马俑门票预订',
  '杭州西湖游船价格',
  '苏州园林哪个最值得去',
  '南京夫子庙小吃推荐',
  '2025.10.1 吉安到南昌的火车票？'
])

// 当前显示的3个问题
const currentQuestions = ref(getRandomQuestions(3))

// 获取随机问题
function getRandomQuestions(count: number) {
  const shuffled = [...questionExamples.value].sort(() => 0.5 - Math.random())
  return shuffled.slice(0, count)
}

// 换一换功能
const switchQuestion = () => {
  currentQuestions.value = getRandomQuestions(3)
}

// 点击问题发送到聊天框
const handleQuestionClick = (question: string) => {
  emit('questionClick', question)
}
</script>

<style scoped lang="less"> 
    .container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .support-box {
        display: flex;
        align-items: center;
        img {
            object-fit: cover;
            width: 35px;
            height: 35px;
            margin-right: 8px;
            border-radius: 50%;//头像变为圆形
        }
        p {
            font-size: 14px;
        }
    }
    .custom-question{
        background-color: #ffffff;
        margin:5px 0 ;
        padding: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        .question-title{
            font-size: 18px;
            font-family: 'WenXinXiLeTi', sans-serif;
        }
        .question-list{
            display: flex;
            align-items: center;
            background-color: #f2f4ff;
            border-radius: 40px;
            margin-top: 10px;
            padding: 5px 7px;
            img{
                width: 25px;
                height: 25px;
                object-fit: cover;
            }
            p{
                font-size: 14px;
                padding-left: 4px;
            }
        }
    }
    .switch-question{
        display: inline-flex;
        align-items: center;
        background-color: #a8abb0;
        border-radius: 40px;
        padding: 5px 7px;
        width: 80px;
        height: 20px;
        img{
            width: 20px;
            height: 20px;
        }
        p{
            font-size: 14px;
            padding-left: 5px;
            color: #ffffff;
        }
    }
</style>